<!--
 * @Date: 2024-05-30 15:58:21
 * @LastEditors: 陈俊宇 467724386@qq.com
 * @LastEditTime: 2024-09-23 09:10:24
-->
<template>
    <div v-show="!state.loading">
        <transition name="fade">
            <el-button
                class="contact"
                type="primary"
                @click="showDialog"
                v-show="!state.showDialog && !state.allHide"
            >
                <img src="@/assets/contact.png" class="img" alt="" />

                <div>Contact us</div>
            </el-button>
        </transition>

        <transition name="fade">
            <div class="dialog" v-show="state.showDialog && !state.allHide">
                <div class="title">Welcome to Contact Wi-Tek Support Team!</div>
                <img
                    src="@/assets/close.png"
                    class="close"
                    alt=""
                    @click="state.showDialog = false"
                />

                <div class="entrance-list">
                    <div class="entrance" @click="showForm">
                        <div>Email Ticket</div>
                        <img src="@/assets/email.png" class="img" alt="" />
                    </div>

                    <div class="entrance" @click="showChat">
                        <div>Live Chat</div>
                        <img src="@/assets/chat.png" class="img" alt="" />
                    </div>
                </div>
            </div>
        </transition>

        <transition name="zoom">
            <div class="tips" v-if="state.showDialog && state.showTips">
                <img
                    src="@/assets/close1.png"
                    class="close"
                    alt=""
                    @click="state.showTips = false"
                />

                {{ state.tips }}
            </div>
        </transition>

        <transition name="el-fade-in-linear">
            <Form
                v-if="state.showForm"
                @close="closeForm"
                v-draggable
                :countryList="state.countryList"
            ></Form>
        </transition>

        <Chat
            v-show="state.showChat"
            :userInfo="state.userInfo"
            :isOpen="state.showChat"
            :countryList="state.countryList"
            @close="closeChat"
        ></Chat>
    </div>
</template>

<script setup>
import { Info, countryList } from '@/api'
import { reactive, onMounted, onBeforeUnmount, nextTick, ref } from 'vue'
import Chat from './Chat.vue'
import Form from './Form.vue'

onMounted(() => {
    getUserInfo()
    getCountryList()
})

onBeforeUnmount(() => {})

// const store = useStore()
const state = reactive({
    userInfo: {
        maxLength: 500,
    },
    showDialog: false,
    showForm: false,
    countryList: [],
    showChat: false,
    showTips: false,
    allHide: false,
    tips: '',
    loading: false,
    showPreview: false,
    previewFile: {},
})

// 定义获取数据的方法
const getUserInfo = async (appId = '0rj0ej') => {
    state.loading = true
    Info(appId).then((res) => {
        state.userInfo = res.data
        state.userInfo.appId = appId
        state.userInfo.userId = res.data.imUser.userId
        state.userInfo.maxLength = res.data.consultInvite.maxWordsNum
        // state.userInfo.enableQuick = false
        state.tips = res.data.nonworkingMsgWeb
        state.loading = false
    })
}

const getCountryList = () => {
    countryList().then((res) => {
        state.countryList = res.data
    })
}

const showDialog = () => {
    state.showDialog = true
}

const showChat = () => {
    const userInfo = state.userInfo
    if (!userInfo.enableQuick && !userInfo.isWorkingHours) {
        state.showTips = true
    } else {
        state.showChat = true
        state.allHide = true
        state.showDialog = false
    }
}

const closeChat = () => {
    state.showChat = false
    state.allHide = false
}

const showForm = () => {
    state.showForm = true
    state.allHide = true
    state.showDialog = false
}

const closeForm = () => {
    state.showForm = false
    state.allHide = false
}
</script>

<style scoped lang="scss">
.contact {
    // width: 248px;
    // height: 64px;
    width: 200px;
    height: 46px;
    background: #ff8217;
    border-radius: 11px;
    position: fixed;
    right: 40px;
    bottom: 124px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    // font-size: 22px;
    font-size: 18px;
    z-index: 9999;
    cursor: pointer;
    &:hover {
        opacity: 0.8;
    }
    .img {
        // width: 32px;
        // height: 32px;
        width: 24px;
        height: 24px;
        margin-right: 20px;
    }
}

.dialog {
    width: 380px;
    height: 392px;
    position: fixed;
    right: 40px;
    box-shadow: var(--el-box-shadow-light);
    border-radius: 4px;
    bottom: 40px;
    z-index: 9998;

    .title {
        padding: 22px 20px;
        background: #ff8217;
        border-radius: 4px 4px 0px 0px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
    }

    .close {
        width: 16px;
        height: 16px;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
        transition: 0.5s ease;

        &:hover {
            transform: scale(1.2);
        }
    }

    .entrance-list {
        padding: 24px;
        background: #fff;
        .entrance {
            width: 100%;
            height: 110px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 32px 0 24px;
            font-size: 20px;
            color: #000;
            background: #f8f8f8;
            border-radius: 4px;
            box-sizing: border-box;

            .img {
                width: 72px;
                height: 72px;
            }

            &:hover {
                box-shadow: 0 0 2px #ff8217;
            }

            &:first-child {
                margin-bottom: 24px;
            }
        }
    }
}

.tips {
    width: 380px;
    background: #fff3e9;
    border-radius: 4px;
    border: 1px solid #ff8217;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #333333;
    position: fixed;
    right: 40px;
    bottom: 40px;
    box-sizing: border-box;
    line-height: 24px;
    z-index: 9999;

    .close {
        width: 28px;
        height: 28px;
        margin-bottom: 14px;
    }
}
</style>
